/**
 * 数字输入框
 */
function scNumber(){
    var com = scCommon.instance();
    var crEle = com.crEle;
    
    var number = null;
    var name = null;

    this.createView = function(option){
        option = option ? option : {
            maxNum: 1000,
            minNum: 0
        };

        name = option.name;

        option.step = option.step ? option.step : 1;
        option.unit = option.unit ? option.unit : "";

        number = crEle(null, "sc-number");

        var col1 = crEle("div", "sc-number-col");
        var input = crEle("input", "sc-number-input");
        var unit = crEle("div", "sc-number-unit");

        input.type = "text";
        input.name = option.name;
        input.value = option.value;

        unit.innerText = option.unit;

        col1.appendChild(input);
        col1.appendChild(unit);

        var col2 = crEle("div", "sc-number-col");
        var plusBtn = crEle("button", "sc-number-btn");
        var minusBtn = crEle("button", "sc-number-btn");

        plusBtn.innerText = "▲";
        minusBtn.innerText = "▼";

        col2.appendChild(plusBtn);
        col2.appendChild(minusBtn);

        number.appendChild(col1);
        number.appendChild(col2);

        plusBtn.addEventListener("click", ()=>{
            input.value = parseFloat((parseFloat(input.value) + option.step).toFixed(1));
            input.value = input.value > option.maxNum ? option.maxNum : input.value; 

            if(listeners["change"]){
                triggerListener(listeners["change"], input.value);
            }
        });

        minusBtn.addEventListener("click", ()=>{
            input.value = parseFloat((parseFloat(input.value) - option.step).toFixed(1));
            input.value = input.value < option.minNum ? option.minNum : input.value;

            if(listeners["change"]){
                triggerListener(listeners["change"], input.value);
            }
        });

        number.addEventListener("change", ()=>{
            input.value = parseFloat(input.value);

            if(isNaN(input.value)){
                input.value = 10;
            }
            
            input.value = input.value < option.minNum 
                ? option.minNum 
                : input.value > option.maxNum 
                    ? option.maxNum 
                    : input.value;
                    
            if(listeners["change"]){
                triggerListener(listeners["change"], input.value);
            }
        });

        return number;
    }

    /**
     * 获取名称
     * @returns 
     */
    this.getName = function(){
        return name;
    }

    var listeners = {};

    /**
     * 添加监听
     * @param {*} type 
     * @param {*} callback 
     */
    this.addEventListener = function(type, callback){
        if(!listeners[type]){
            listeners[type] = [];
        }

        listeners[type].push(callback);
    }

    /**
     * 触发监听
     * @param {*} listener 
     * @param {*} param 
     */
    var triggerListener = function(listener, param){
        for(let i in listener){
            listener[i](param);
        }
    }
}